<template>
  <div class="wallet">
    <header>
      <span @click="$back()">
        <el-icon color="#fff" size="18">
          <ArrowLeftBold />
        </el-icon>
      </span>
      <strong>{{ $t("language.wallet.name") }}</strong>
      <span @click="$openPage('/kefu')"><NuxtImg src="/img/kefu.png" alt="" /></span>
    </header>
    <main class="main">
      <div class="head">
        <template v-if="coinType == 'BRL'">
          <NuxtImg src="/img/mylrft.png" alt="" />
          <div>
            <span>BRL </span>
            <strong>{{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</strong>
          </div>
        </template>
        <template v-else>
          <NuxtImg src="/img/T.png" alt="" />
          <div>
            <span>USDT </span>
            <strong>{{ $dot(coininfo[coinType.toLowerCase()]['totalCoins']) }}</strong>
          </div>
        </template>

        <div class="icon" @click="remote">
          <el-icon class="elicon" :class="remoteing ? 'rotate' : ''" ref="remoteicon" color="#999" size="20">
            <Refresh />
          </el-icon>
        </div>
      </div>
      <dl>
        <dd>
          <NuxtImg src="/img/w1.png" alt="" />
          <div>
            <span>{{ $t("language.wallet.money1")
              }}</span><strong>{{ $dot(coininfo[coinType.toLowerCase()]['freezeCoins']) }}</strong>
          </div>
        </dd>
        <dd>
          <NuxtImg src="/img/w2.png" alt="" />
          <div>
            <span>{{ $t("language.wallet.money2") }}</span><strong>{{
        $dot(coininfo[coinType.toLowerCase()]['withdrawalCoins']) }}</strong>
          </div>
        </dd>
        <dd v-if="coinType == 'BRL'">
          <NuxtImg src="/img/w3.png" alt="" />
          <div>
            <span>{{ $t("language.wallet.money3")
              }}</span><strong>{{ $dot(coininfo[coinType.toLowerCase()]['bonusCoins']) }}</strong>
          </div>
        </dd>
      </dl>
      <ul>
        <li>
          <el-button @click="$openPage('/rechange')">{{
        $t("language.wallet.btn1")
      }}</el-button>
          <el-button @click="$openPage('/withdrawal')">{{
        $t("language.wallet.btn2")
      }}</el-button>
        </li>
        <li>
          <div>
            <NuxtImg src="/img/w3.png" alt="" />
            <div>
              <span>{{ $t("language.wallet.money4") }}</span>
              <strong>
                {{ $dot(
        coininfo[coinType.toLowerCase()]['commissionCoins']) }}</strong>
            </div>
          </div>
        </li>
        <li>
          <el-button @click="initVisible2 = true">{{
        $t("language.wallet.btn3")
      }}</el-button>
          <el-button @click="$openPage('/withdrawal')">{{
        $t("language.wallet.btn4")
      }}</el-button>
        </li>
      </ul>
      <h3>{{ $t("language.wallet.title") }}</h3>
      <ol>
        <li>
          <NuxtImg src="/img/mylrft.png" alt="" />
          <div class="middle">
            <span>BRL </span>
            <strong>{{ $dot(coininfo['brl']['totalCoins']) }}</strong>
          </div>
          <el-switch v-model="value1" @change="change1" class="ml-2" style="
            --el-switch-on-color: rgb(0, 144, 109);
            --el-switch-off-color: rgb(50, 53, 62);
          " />
        </li>
        <li>
          <NuxtImg src="/img/t1.png" alt="" />
          <div class="middle">
            <span>USDT</span>
            <strong>{{ $dot(coininfo['usdt']['totalCoins']) }}</strong>
          </div>
          <el-switch v-model="value2" @change="change2" class="ml-2" style="
            --el-switch-on-color: rgb(0, 144, 109);
            --el-switch-off-color: rgb(50, 53, 62);
          " />
        </li>
      </ol>

      <el-dialog class="walletdialog" width="92%" v-model="initVisible2" align-center>
        <!-- <div class="closer" >
        <span @click="initVisible2 = false">
          <el-icon color="#b5b6c8" size="16">
            <CloseBold />
          </el-icon>
        </span>
      </div> -->

        <p>{{ $t('language.wallet.dialogtip') }}</p>
        <div>
          <el-button>{{
        $t("language.wallet.close")
      }}</el-button>
          <el-button style="background: #0a906c;color: #fff;" @click="getmoney">{{
            $t("language.wallet.sure")
            }}</el-button>
        </div>

      </el-dialog>
    </main>
  </div>
</template>
<script setup lang="ts">
import { ArrowLeftBold, Refresh } from '@element-plus/icons-vue'
import { ref, reactive, onActivated,shallowRef, computed } from "vue";
const store = useStore();
let coinType = computed<string>((): string => store.cointype)
let coininfo: any = reactive({
  brl: { totalCoins: 0, freezeCoins: 0, withdrawalCoins: 0, bonusCoins: 0, commissionCoins: 0 },
  usdt: { totalCoins: 0, freezeCoins: 0, withdrawalCoins: 0, bonusCoins: 0, commissionCoins: 0 }
})
// 获取用户信息
let info = computed(() => store.userinfo)
let initVisible2 = shallowRef<boolean>(false)

// 数据初始化
let initData = () => {
  useHttpPOST(`/Assets/v1.0/Account`, { id: info.value.gameID }).then(({ data }: { data: any }) => {
    // // console.log(data.data.accounts, 9);
    for (let key in data.value.data.accounts) {
      coininfo[key] = data.value.data.accounts[key]
    }
  });
}
//佣金提现
let getmoney = () => {
  initVisible2.value = false
  useHttpPOST(`/Payment/v1.0/User/CommissionTransfer`, { id: info.value.gameID }).then(({ data }: { data: any }) => {
    // console.log(data.data.accounts, 9);
    if (data.value.code == 0) {
      initData()
    }
  });
}
let remoteing = shallowRef<boolean>(false);
let remote = () => {
  remoteing.value = true;
  let time: string | null | any = null;
  if (time) {
    GetUserInfo(info.value).then(({ data }: { data: any }) => {
      if (data.value.code == 0) {
        store.$patch({ coininfo: data.value.data.accounts })
        // store.commit('SET_COININFO', data.data.accounts)
        // localStorage.setItem('coininfo', JSON.stringify(data.data.accounts))
      }
    })
    time = setTimeout(() => {
      clearTimeout(time)
      remoteing.value = false;
    }, 2000);
  }
};
//再次打开执行
let value1 = shallowRef<boolean>(coinType.value == 'BRL' ? true : false);
let value2 = shallowRef<boolean>(coinType.value == 'BRL' ? false : true);
onActivated(() => {
  value1.value = coinType.value == 'BRL' ? true : false;
  value2.value = coinType.value == 'BRL' ? false : true;
  initData()
})

let change1 = (e: any) => {
  value2.value = !e
  store.$patch({ cointype: e ? 'BRL' : 'USDT' })
  // console.log(e ? 'BRL' : 'USDT');

  // store.commit("SET_COINTYPE", e ? 'BRL' : 'USDT')
  // localStorage.setItem('coinType', e ? 'BRL' : 'USDT')

}
let change2 = (e: any) => {
  value1.value = !e
  store.$patch({ cointype: e ? 'USDT' : 'BRL' })
  // store.commit("SET_COINTYPE", e ? 'USDT' : 'BRL')
  // localStorage.setItem('coinType', e ? 'USDT' : 'BRL')
}

</script>
<style lang="scss">
.walletdialog {
  background: #32353e;
  border-radius: 12px;

  .el-dialog__body {
    p {
      font-size: 14px;
      color: #b5bac8;
      word-spacing: 2px;
      margin-top: 30px;
      line-height: 24px;
    }

    div {
      @include flex(row, flex-end, center);
    }

    .el-button {
      border: 1px solid #0a906c;
      background: transparent;
      color: #0a906c;
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      font-size: 12px;
      margin: 20px 0 0 10px;
    }
  }





}
</style>
<style scoped lang="scss">
.wallet {
  width: 100%;

  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;

    span {
      display: block;
      height: 28px;
      width: 28px;
      @include flex(row, flex-start, center);
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .main {
    background-color: #1a1a1a;
    padding: 45px 20px 90px;
    width: 100%;
    background-color: rgb(26, 26, 26);

    .head {
      padding-top: 10px;
      height: 44px;
      @include flex(row, flex-start, center);

      img {
        width: 36px;
        border-radius: 18px;
        margin-right: 10px;
      }

      div {
        margin-right: 16px;
        @include flex(column, center, flex-start);

        span {
          font-size: 16px;
          color: #999;
        }

        strong {
          font-size: 16px;
          color: #fff;
        }
      }

      .icon {
        @include flex(row, flex-start, flex-end);
        height: 100%;
        margin-bottom: -5px;
        cursor: pointer;

        .elicon {
          transition: all 1s;
          transform-origin: center;
        }

        .rotate {
          animation: rotate 2s cubic-bezier(0.5, 0, 0.5, 1) 1;
        }

        /* 定义一个名为rotate的动画 */
        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(-360deg);
          }
        }
      }
    }

    dl {
      width: 100%;
      @include flex(row, flex-start, center);
      margin-top: 15px;

      img {
        width: 35px;
        margin: 0px 5px 0 0;
        background-color: #0a906c;
        padding: 3px;
        border-radius: 5px;
      }

      dd {
        height: 48px;
        flex: 1;
        @include flex(row, flex-start, center);

        div {
          @include flex(column, center, flex-start);

          span {
            font-size: 14px;
            color: #999;
            line-height: 16px;
          }

          strong {
            font-size: 14px;
            color: #fff;
            font-weight: normal;
          }
        }
      }

      dd+dd {
        margin-left: 5px;
      }
    }

    ul {
      width: 100%;
      margin-top: 15px;

      li:nth-child(1),
      li:nth-child(3) {
        @include flex(row, space-around, center);

        :deep(.el-button) {
          border: 1px solid #0a906c;
          background: transparent;
          color: #0a906c;
          height: 32px;
          line-height: 32px;
          border-radius: 5px;
          font-size: 12px;
        }
      }

      li:nth-child(2) {
        @include flex(row, center, center);
        margin: 15px;

        >div {
          @include flex(row, flex-start, center);

          img {
            height: 30px;
            margin-right: 5px;
            background-color: #0a906c;
            border-radius: 5px;
            padding: 3px;
          }

          div {
            @include flex(column, center, flex-start);

            span {
              font-size: 14px;
              color: #999;
              line-height: 16px;
            }

            strong {
              font-size: 14px;
              color: #fff;
              font-weight: normal;
            }
          }
        }
      }
    }

    h3 {
      font-size: 20px;
      color: #fff;
      margin: 20px 0;
    }

    ol {
      width: 100%;

      li+li {
        margin-top: 20px;
      }

      li {
        padding: 0;

        img {
          width: 36px;
          margin-right: 10px;
        }

        @include flex(row, space-between, center);

        .middle {
          flex: 1;
          @include flex(column, center, flex-start);

          span {
            font-size: 16px;
            color: #999;
          }

          strong {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
